<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 500px;
				padding: 0;
				margin: 20px auto;
			}
			.top{
				display: flex;
			}
			.top div{
				width: 35px;
				height: 20px;
				overflow: hidden;
				position: relative;
			}
			div img{
				position: absolute;
				top: -29px;
			}
			#tishi{
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="top">
				<div>
					<img src="img/star.png-1016.png"/>
				</div>
				<div>
					<img src="img/star.png-1016.png"/>
				</div>
				<div>
					<img src="img/star.png-1016.png"/>
				</div>
				<div>
					<img src="img/star.png-1016.png"/>
				</div>
				<div>
					<img src="img/star.png-1016.png"/>
				</div>
			</div>
			<div id="tishi"></div>
		</div>
		
	</body>
	<script type="text/javascript">
		var imgs = document.querySelectorAll('img')
		var tishi = document.getElementById('tishi')
		for (let i=0; i<imgs.length; i++) {
			imgs[i].onclick = function () {
				for (var a=0; a<imgs.length; a++) {
					imgs[a].style.top = '-29px'
				}
				for (let j=0; j<=i; j++) {
					imgs[j].style.top = '-9px'
				}
				tishi.innerHTML = i + 1 + ' 颗星'
			}
		}
	</script>
</html>
